<template>
    <div class="online-mall">
        <div class="content">
            <template
                v-for="(item, index) in formData"
                :key="index"
            >
                <div 
                    class="merchandise-box"
                    @click="router.push('/commodityDetails?sf_id=' + item.sf_id)"
                >
                    <van-image 
                        width="100%" 
                        height="50vw" 
                        fit="fill" 
                        :src="item.sf_ex50"
                    >
                    </van-image>
                    <div class="merchandise-title">{{item.sf_ex2}}</div>
                    <div class="merchandise-text-box">
                        <div class="merchandise-text-price">￥{{Number(item.sf_ex9)}}</div>
                        <div class="merchandise-text-desc">已售{{ Number(item.sum) }}</div>
                    </div>
                </div>
            </template>
        </div>
    </div>
</template>

<script lang="ts" setup>
    import { ref, reactive, markRaw, onBeforeMount, onBeforeUnmount } from 'vue'
    import type { Ref, Raw } from 'vue'
    import { useRouter, useRoute } from 'vue-router'
    import { showDialog, showConfirmDialog, showLoadingToast, closeToast, showFailToast } from 'vant'
    import { useStore } from '@/store'
    
    import { getSfitemlistApi } from '@/apis'
    const router = useRouter()
    const route = useRoute()
    const store = useStore()

    const formData: Ref<any> = ref([
        // {
        //     stepNum: 0,
        //     sf_ex2: '商品标题',
        //     sf_ex9: '2.00',
        //     sum: '99',
        //     sf_ex50: 'https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg',
        // },
    ])
    showLoadingToast({
        message: '加载中...',
        forbidClick: true,
        duration: 0
    });
    getSfitemlistApi({
        company: '海陵区凤栖园智慧墓园系统'
    }).then(res => {
        formData.value = res
    }).finally(() => {
        closeToast()
    })
  
</script>
<style lang="scss" scoped>
    .online-mall {
        display: flex;
        flex-direction: column;
        height: 100vh;
        overflow: scroll;
        // background-image: url('@/assets/bg/bg10.png');
        // background-size: 100% 100%;
        background-color: #f1f1f1;
    }
    
    .content {
        display: flex;
        flex-wrap: wrap;
        // justify-content: space-around;
        justify-content: flex-start;
        .merchandise-box {
            width: 48%;
            margin: 1%;
            display: flex;
            flex-direction: column;
            align-items: center;
            background-color: #fff;
            box-sizing: border-box;
            border-radius: 5%;
            .merchandise-title {
                width: 95%;
                text-align: left;
                box-sizing: border-box;
                padding-top: 5px;
            }
            .merchandise-text-box {
                width: 95%;
                display: flex;
                box-sizing: border-box;
                padding: 5px 0;
            }
            .merchandise-text-price {
                font-weight: bold;
                color: #ec3434;
                padding-right: 10px;
                box-sizing: border-box;
            }
            .merchandise-text-desc {
                color: #846161;
            }
        }
    }
</style>